<template>
	<view>
		<view class="main">
			<view class="huanzhe_list">
				<view class="huanzhe_card" v-for="m,key in list" :key="m.cuId" @click="choose(key)">
					<view class="left" v-show="piliangPop">
						<!-- <u-checkbox v-model="list[key].check" shape="circle" :labelDisabled="true" activeColor="#4DC0D9" ></u-checkbox> -->
						<u-image :src="m.check ? selected : Unselected " width="36rpx" height="36rpx"></u-image>
					</view>
					<view class="right">
						<view class="huanzhe_card_title">
							{{m.nickName ? m.nickName : '未知' }}<span
								style="color: #36B278;">@{{aiType[m.type ? m.type : 0]}}</span>
						</view>
						<view class="huanzhe_card_time" :class="{dash_border:m.tagName}">
							{{m.createTime}} 由<span style="color: ##F4FDFF;padding: 0 20rpx;">{{m.userName}}</span>添加
						</view>
							<scroll-view scroll-x="true">
								<view class="huanzhe_card_box" v-if="m.tagName">
									<view class="huanzhe_icon" v-for="n in myTags(m.tagName)" >
										{{n}}
									</view>
								</view>
							</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<view class="sticky" v-if="piliangPop">
			<view class="btn_group">
				<view class="new_button" @click="allSelected">
					<u-image :src="allSelect ? selected : Unselected " width="36rpx" height="36rpx"></u-image>
					<view class="m-l-14">全选</view>
					<!-- <u-checkbox v-model="allSelect" shape="circle" activeColor="#4DC0D9">全选</u-checkbox> -->
				</view>
				<view class="my_button" :class="{'inactive':inactive}" @click="confirm">
					打标签<span v-if="userCount">({{userCount}})</span>
				</view>
			</view>
		</view>
		<view class="p-t-40 p-b-40">
			<u-loadmore :status="status" v-if="!empty" />
		</view>
		<view class="img" v-if="empty">
			<u-image :src="emptyImg" width="335rpx" height="320rpx"></u-image>
			<view class="txt">
				暂无患者
			</view>
		</view>
	</view>
</template>

<script>
	//@myCount   //总数
	import {
		getCardDetailsPage
	} from '@/api/index.js'
	import pageMixinNorRequest from '@/utils/pageMixinNorRequest.js' //在需要引入的组件中引入

	export default {
		mixins: [pageMixinNorRequest],
		props: ['QueryParams', 'huanzheFlush'],
		data() {
			return {
				allSelect: false, //全选
				cardId: '',
				aiType: ['未知', '微信', '企业微信'],
				emptyImg: require('@/static/img/No_team@2x.png'),
				total: null,
				selected: require('@/static/icon/selected@2x.png'),
				Unselected: require('@/static/icon/Unselected@2x.png'),
				huanzheList: [],
				params: {},
				//piliangPop:false,
			}
		},
		mounted() {
			uni.$on('huanTList',this.getTeam)
			uni.$on('huanTListClear',this.clearPageStatus)
		},
		computed: {
			piliangPop() {
				//PATIENTSHOW
				return this.$store.state.doc.showSelPatient
			},
			inactive() {
				const b = this.huanzheList.every(v => v.check == false)
				return b
			},
			userCount() {
				const arrNumber = this.huanzheList.filter(v => v.check == true)
				//console.log(arrNumber);
				if (arrNumber.length < 1) {
					return ''
				} else {
					return arrNumber.length
				}
			},
			myTags(tagList) {
				return (tagList) => {
					if (tagList) {
						return tagList.split(',')
					} else {
						return tagList
					}
				}
			}
		},
		watch: {
			huanzheFlush(neval, oldval) {
				if (neval) {
					this.clearPageStatus()
					this.getTeam()
				}
			},
			QueryParams: {
				handler(neval, oldVal) {
					//console.log(neval);
					if (neval.teamId || neval.userIds) {
						this.huanzheList = []
						this.clearPageStatus()
						this.getTeam()
					}
				},
				deep: true,
			}
		},
		methods: {
			// stopClick(e){
			// 	console.log(123);
			// 	 e.stopPropagation();
			// },
			choose(key) { //选择患者
				//console.log(key);
				if (this.piliangPop) {
					this.huanzheList[key].check = !this.huanzheList[key].check
					let pass = this.huanzheList.every(v => v.check == true)
					//console.log(pass,this.list,this.huanzheList,'ppp');
					pass ? this.allSelect = true : this.allSelect = false //如果有一个没选，全选就灭
					return
				}
				//console.log(key, this.huanzheList);
				let cuId = this.huanzheList[key].cuId
				let id =  this.huanzheList[key].id
				//return
				
				this.$store.commit('DETAILSPARAMS',{cuId,id})
				uni.navigateTo({
					url: `/pages/patient/huanzhedetail?cuId=${cuId}&id=${id}`
				})
				//console.log();
				//return
			},
			async getMyList(obj) { //请求,这个最好在使用那个组件中使用，这个地方可以扩展接参数
				//例如， {..obj,id:15}
				//console.log(obj);
				this.params = {
					...obj,
					...this.QueryParams
				}
				//this.huanzheList = []
				//console.log(this.QueryParams, 'QueryParams子组件');
				let res = await getCardDetailsPage(this.params)
				this.total = res.total
				let r =  res.rows.map(v => {
					v.check = false
					return v
				})
				this.huanzheList.push(...r)
				//this.huanzheList = r
				this.$emit('myCount', this.huanzheList)
				this.$emit('totalHuanzhe',this.total)
				//console.log(this.total, 'cardlist');
				return res
			},
			//getCardDetailsPage
			goNewCodeEdit() {
				uni.navigateTo({
					url: `/pages/intel/newCode?cardId=${this.topData.cardId}`
				})
			},
			allSelected() {
				if (!this.allSelect) {
					this.huanzheList.forEach(v => {
						v.check = true
					})
					this.allSelect = true
				} else {
					this.huanzheList.forEach(v => {
						v.check = false
					})
					this.allSelect = false
				}

			},
			confirm() {
				//模拟写一下
				// this.huanzheList.forEach(v => {
				// 	v.check = false
				// })
				// this.$store.commit('PATIENTSHOW', false)
				this.$emit('dabiaoqian', this.huanzheList)
				//this.$store.state.doc.showSelPatient
			}
		},
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #F8F8F8;
		width: 100%;
		//min-height: 100vh;
		//padding: 0 24rpx 0 24rpx;
		.huanzhe_list {
			background: white;
			//margin-top: 24rpx;
			border-radius: 20rpx;
			background-color: #F8F8F8;

			.huanzhe_card {
				display: flex;
				//flex-direction: column;
				align-items: center;
				margin: 0 24rpx 20rpx 24rpx;
				padding: 24rpx 0 0 24rpx;
				border-radius: 20rpx;
				background-color: white;

				.left {
					margin-right: 40rpx;
				}

				.right {
					display: flex;
					flex-direction: column;

					.huanzhe_card_title {
						font-weight: bold;
						font-size: 34rpx;
						color: #212121;
						line-height: 40rpx;
					}

					.huanzhe_card_time {
						//font-weight: 500;
						font-size: 28rpx;
						color: #999999;
						line-height: 33rpx;
						margin-top: 8rpx;
						padding-bottom: 26rpx;

					}

					.huanzhe_card_box {
						display: flex;
						margin-top: 24rpx;
						padding-bottom: 24rpx;
						width: 650rpx;
						.huanzhe_icon {
							padding: 8rpx 20rpx;
							background: #F8F8F8;
							border-radius: 12rpx;
							flex-shrink: 0;
							margin-bottom: 24rpx;
							margin-right: 12rpx;
						}

					}
				}



			}
		}
	}

	.dash_border {
		border-bottom: 1px dashed #E8E8E8;
	}

	.img {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.txt {
		margin-top: 10rpx;
		//font-weight: 500;
		font-size: 32rpx;
		color: #C7C7C7;
		line-height: 38rpx;
		text-align: center;
	}

	.sticky {
		width: 100%;
		padding: 20rpx 24rpx 30rpx 24rpx;
		position: fixed;
		z-index: 10;
		bottom: 0;
		padding-bottom: 80rpx;
		background-color: #FFFFFF;

		.btn_group {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.my_button {
				flex-shrink: 0;
				background-color: #4DC0D9;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 38rpx;
				text-align: center;
				padding: 20rpx 100rpx;
				width: 400rpx;
				border-radius: 20rpx;
			}

			.new_button {
				display: flex;
				flex-shrink: 0;
				//background-color: #A6DFEC;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				//color: #4DC0D9;
				line-height: 38rpx;
				text-align: center;
				padding: 20rpx 128rpx 20rpx 0;
				border-radius: 20rpx;
			}
		}
	}

	.inactive {
		background-color: #A6DFEC !important;
	}
	.selected {
		background-color: #EFFFF8;
	}
</style>